<template>
  <div :device="device" class="dev-container">
    <div class="dev-header">
      <div class="dev-icon-wrapper card-icon">
        <svg-icon icon-class="axis" class-name="dev-icon" />
      </div>
      <div class="dev-info">
        <div class="dev-info-name"> {{ device.name }} </div>
        <div class="dev-info-position"> {{ device.position }} </div>
        <div v-if="device.online === 1" class="dev-online"> 在线 </div>
        <div v-else class="dev-offline"> 离线 </div>
      </div>
      <div style="float:right;margin:10px;">
        <el-button type="success" size="large" @click="AxisEditPositions(device)"> 设置 </el-button>
        <el-button type="primary" size="large" @click="AxisGetPositions(device)"> 获取所有轴位置 </el-button>
        <el-button type="danger" size="large" @click="AxisStop(device)"> 停止所有轴 </el-button>
      </div>
    </div>

    <div class="dev-body">
      <div v-for="(item, index) in device.value.axis" :key="index" class="axis">
        <div class="name"> {{ item.name }} </div>
        <div class="row">
          <span class="position"> {{ item.position }}  </span>
          <span> {{ item.unit }}  </span>
          <el-popover placement="top" title="重置" width="300" trigger="click">
            <el-row :gutter="20">
              <el-col :span="16"> <el-input v-model="resetPosition" /> </el-col>
              <el-col :span="4"> <el-button type="primary" @click="onSetPos(item, index)">确定</el-button> </el-col>
            </el-row>
            <el-button slot="reference" class="position-btn">重置当前位置</el-button>
          </el-popover>
        </div>

        <div class="name"> {{ item.position_name }} </div>

        <div class="row">
          <el-input-number
            v-model="item.target"
            :precision="3"
            :step="0.1"
            :max="10000"
            :min="-10000"
            size="medium"
            controls-position="right"
          />
          <span> {{ item.unit }} </span>
          <el-popover placement="top" title="选择目标位置" width="500" trigger="click">
            <el-table ref="singleTable" :data="currentPositions" highlight-current-row style="width: 100%" @current-change="onSelectChange">
              <el-table-column property="name" label="名称" />
              <el-table-column property="value" label="位置" />
            </el-table>
            <el-button slot="reference" @click="onSelectPos(item, index)">选择目标位置</el-button>
          </el-popover>
        </div>

        <div class="status-ok"> {{ item.status | statusFilter }} </div>
        <div class="row">
          <el-button v-loading.fullscreen.lock="item.loading" type="success" @click="onMove(item, index)"> 移动 </el-button>
          <el-button v-loading.fullscreen.lock="item.loading" type="warning" @click="onMoveErr(item, index)"> 相对 </el-button>
          <el-button type="danger" @click="onStop(item, index)"> 停止 </el-button>
          <el-button type="primary" @click="onGetPosition(item, index)"> 获取 </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { CMD_AXIS, CMD_MOVE } from '@/utils/cmd'

export default {
  name: 'TrackAxis',
  components: { },
  filters: {
    typeFilter(status) {
      if (status === -1) {
        return 'danger'
      } else if (status === 0) {
        return 'success'
      } else if (status === 1) {
        return 'warning'
      } else if (status === 2) {
        return 'warning'
      } else if (status === 3) {
        return 'warning'
      } else if (status === 256) {
        return 'danger'
      } else if (status === 512) {
        return 'danger'
      } else {
        return 'danger'
      }
    },
    statusFilter(status) {
      if (status === -1) {
        return '异常'
      } else if (status === 0) {
        return '正常'
      } else if (status === 1) {
        return '移动中'
      } else if (status === 2) {
        return '获取位置'
      } else if (status === 3) {
        return '正常'
      } else if (status === 256) {
        return '到达限位'
      } else if (status === 512) {
        return '到达限位'
      } else {
        return '无'
      }
    }
  },
  props: {
    id: {
      type: Number,
      default: 0
    },
    device: {
      type: Object,
      default: null
    },
    value: {
      type: Object,
      default: null
    },
    name: {
      type: String,
      default: null
    },
    sub: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      resetPosition: 0,
      showHeader: false,
      tableWidth: '150',
      dialogSelectPosFormVisible: false,
      selectIndex: 0,
      currentPositions: [],
      currentPosition: null,
      current_axis: null,
      current_index: null
    }
  },
  watch: {
    device: {
      deep: true,
      handler(val) {
        this.setDevice(val)
      }
    },
    value: {
      deep: true,
      handler(val) {
        this.setValue(val)
      }
    }
  },
  created() {
  },
  methods: {
    setValue(val) {
      this.value = val
    },
    setDevice(val) {
      this.device = val
    },

    // 重置位置
    onSetPos(row, index) {
      this.resetPositionVisible = true
      this.publish(this.device.sub, JSON.stringify({
        code: CMD_AXIS[index].set_position.toString(),
        msg: (parseFloat(this.resetPosition) * 1000).toString()
      }))
    },

    // 选择位置
    onSelectPos(row, index) {
      this.currentPositions = row.positions
      this.selectIndex = index
    },
    onSelectChange(pos) {
      this.device.value.axis[this.selectIndex].target = pos.value
    },

    onMoveStart(axis, index) {
      // 开启移动
      axis.status = 0

      axis.move_flag = true
      axis.move_done = true
      axis.move_timeout_cnt = 0

      axis.get_flag = false
      axis.get_done = false
      axis.get_timeout_cnt = 0

      axis.done = false
      // axis.loading = true
      console.log('移动')
      console.log(axis)
      this.timer = setInterval(() => {
        if (axis.done) {
          axis.loading = false
          console.log('移动完成,清除定时器...')
          clearInterval(this.timer)
        }
        console.log(axis.get_done)
        // 移动
        if (axis.move_flag) {
          console.log('发送移动命令....')
          if (axis.move_done) {
            axis.move_done = false
            axis.move_timeout_cnt = 0
          }
          this.onMove(axis, index)
          axis.move_timeout_cnt += 1
          if (axis.move_timeout_cnt > 3) {
            axis.loading = false
            this.$message({ message: '移动超时~', type: 'warning' })
            clearInterval(this.timer)
          }
        }
        // 获取位置
        if (axis.get_flag) {
          console.log('发送获取命令....')
          if (axis.get_done) {
            axis.get_done = false
            axis.get_timeout_cnt = 0
          }
          this.onGetPosition(axis, index)
          axis.get_timeout_cnt += 1
          if (axis.get_timeout_cnt > 3) {
            axis.loading = false
            this.$message({ message: '获取位置超时~', type: 'warning' })
            clearInterval(this.timer)
          }
        }
      }, 1000)
    },
    onMove(axis, index) {
      this.publish(this.device.sub, JSON.stringify({
        code: CMD_AXIS[index].move_pos.toString(),
        msg: (parseFloat(axis.target) * 1000).toString()
      }))
    },
    onMoveErr(axis, index) {
      this.publish(this.device.sub, JSON.stringify({
        code: CMD_AXIS[index].move_err.toString(),
        msg: (parseFloat(axis.target) * 1000).toString()
      }))
    },
    onStop(axis, index) {
      this.publish(this.device.sub, JSON.stringify({
        code: CMD_AXIS[index].stop.toString(),
        msg: '0'
      }))
    },
    onGetPosition(axis, index) {
      console.log('获取轴' + index + '位置')
      this.publish(this.device.sub, JSON.stringify({
        code: CMD_AXIS[index].get_position.toString(),
        msg: '1'
      }))
    },
    onGetStatus(axis, index) {
      console.log('获取轴' + index + '状态')
      this.publish(this.device.sub, JSON.stringify({
        code: CMD_AXIS[index].get_status.toString(),
        msg: '1'
      }))
    },

    // 停止所有轴运动
    AxisStop(item) {
      this.publish(item.sub, JSON.stringify({
        code: CMD_MOVE.stop.toString(),
        msg: '0'
      }))
    },

    // 获取所有轴位置
    AxisGetPositions(item) {
      console.log('移动轴获取位置...')
      this.publish(item.sub, JSON.stringify({
        code: CMD_MOVE.get_positions.toString(),
        msg: '1'
      }))
    },

    // 跳转到设置界面
    AxisEditPositions(item) {
      console.log('编辑运动轴设备...')
      this.$router.push({ path: '/editor/device/axis/set', query: item })
    },

    publish(topic, message) {
      console.log('推送消息')
      console.log('topic:' + topic)
      console.log('message:' + message)
      this.$mqtt.publish(topic, message)
    }

  }
}
</script>

<style lang="scss" scoped>

.dev-container {
  margin: 10px;
  background: #fff;
  width: 100%;
  transition: 0.3s;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  border-radius: 10px;
  &:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  }
}
.position-text{
  color: #ff00ff;
  font-size: 25px;
}

.dev-header {
  background:#fff;
  height: 110px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  color: #666;
  border-color: rgba(0, 0, 0, .55);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom: 1px solid #ccc;
  // &:hover {
  //   .dev-icon-wrapper {
  //     color: #fff;
  //   }

  //   .card-icon{
  //     background: #40c9c6;
  //   }
  // }
  .dev-icon-wrapper {
    float: left;
    margin: 14px 0 0 14px;
    padding: 16px;
    transition: all 0.38s ease-out;
    border-radius: 6px;
    color: #40c9c6;
  }

  .dev-icon {
    float: left;
    font-size: 48px;
  }

  .dev-info {
    float: left;
    font-weight: bold;
    margin: 26px;
    .dev-info-name {
      line-height: 18px;
      color: rgba(0, 0, 0, 0.45);
      font-size: 20px;
      margin-bottom: 12px;
    }
    .dev-info-position {
      line-height: 18px;
      color: rgba(0, 0, 0, 0.45);
      font-size: 16px;
      margin-bottom: 12px;
    }
    .dev-online {
      line-height: 18px;
      color: rgba(0, 255, 0, 0.45);
      font-size: 16px;
      margin-bottom: 12px;
    }
    .dev-offline {
      line-height: 18px;
      color: rgba(255, 0, 0, 0.45);
      font-size: 16px;
      margin-bottom: 12px;
    }
  }
}

.dev-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 5px 5px;
  padding: 20px;

  .axis {
    display: grid;
    grid-template-columns: 2fr 3fr;
    grid-gap: 10px 10px;
    justify-items:  start;
    align-items: center;
    padding: 10px;
    background: #fff;
    box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, .05);
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    border-radius: 10px;
    .name {
      font-weight: bold;
      color: rgba(0, 0, 0, 0.45);
      font-size: 32px;
    }
    .row {
      width: 100%;
      display:flex;
      display:-webkit-flex;/*Safari*/
      justify-content:space-around;/*水平排布方式*/
      align-items:center;/*垂直对齐方式*/
    }
    .position {
      line-height: 18px;
      color: rgba(255, 0, 255, 0.45);
      font-size: 30px;
      width:200px;
      text-align:center;
      display:block;
    }
    .status-err {
      font-weight: bold;
      color: rgba(250, 0, 0, 0.45);
      font-size: 20px;
    }
    .status-ok {
      font-weight: bold;
      color: rgba(0, 250, 0, 0.45);
      font-size: 20px;
    }
    .status-other{
      font-weight: bold;
      color: gray;
      font-size: 20px;
    }

    .online {
      color: rgba(0, 255, 0, 0.45);
      font-size: 16px;
    }

    .offline {
      color: rgba(255, 0, 0, 0.45);
      font-size: 16px;
    }
  }
}

</style>
